<template>
    <div class="login">
        <div class="form-box">
            <div class="title">登录</div>
            <!-- <div class="title-plant">协同处置系统</div> -->
            <div class="form-item">
                <a-input v-model="loginForm.username" placeholder="请输入账号"></a-input>
            </div>
            <div class="form-item">
                <a-input v-model="loginForm.password" placeholder="请输入密码"
                         type="password"></a-input>
            </div>
            <div class="form-item" style="display: flex;justify-content: space-between;width: 220px;margin-left: -100px;">
              <a-input v-model="loginForm.code" placeholder="请输入短信验证码">
              </a-input>
              <a-button style="cursor: pointer;right: -100px;position: absolute;" type="primary" @click="getCode" v-if="time === 0">发送短信</a-button>
              <a-button style="cursor: pointer;right: -100px;position: absolute;" type="primary" disabled v-else>{{ time }}s后重新获取</a-button>
            </div>
            <div class="form-item" style="display: flex;justify-content: space-between;width: 220px;margin-left: -100px;position: relative;">
              <a-input v-model="loginForm.userCaptcha" placeholder="请输入验证码">
              <!-- <a-icon slot="prefix" type="user" :style="{ color: '#1F3B8A', fontSize: '18px', marginRight: '24px' }"/> -->
              </a-input>
              <img style="cursor: pointer;right: -100px;position: absolute;" :src="getCheckNumber" @click="refreshImgFun" alt="">
            </div>
            <div class="login-btn" @click="handleLogin">{{ isLogin ? '登录中...' : '立即登录'}}
            </div>
        </div>

        <AvatarDropdown ref="pwd" hidden />
    </div>
  </template>

  <script>
    import { getCheckNumber } from '@/api/user';
    import { AESEncrypt } from '@/utils/utils'
    import {getCode} from "@/api/api";
    import AvatarDropdown from '@/components/GlobalHeader/AvatarDropdown'

  export default {
    components: {
        AvatarDropdown
    },
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                code: ''
            },
          isLogin: false,
          checkKey: '',
          getCheckNumber: '',
          time: 0
        }
    },
    created() {
        const type = this.$route.query.type
        if(type == 'autoLogin') {
            this.handleLogin()
        }

        this.refreshImgFun()
    },
    // mounted() {
    //     this.$refs.pwd.modalShow.show1 = true
    // },
    methods: {
        getCode() {
            if (!this.loginForm.username) {
            this.$message.error('请输入手机号！');
            return;
            }
            if (this.time !== 0) return;
            this.time = 60;
            const s = setInterval(() => {
            if (this.time === 0) {
                clearInterval(s);
                return;
            }
            this.time -= 1;
            }, 1000);
            getCode({
            mobile: this.loginForm.username
            }).then(res => {

            }).catch(() => {
            clearInterval(s);
            this.time = 0;
            });
        },
         handleLogin() {
          if (this.isLogin) return
          this.isLogin = true
          const { username, password, userCaptcha, code } = this.loginForm;
             this.$store.dispatch('Login', {
                username: AESEncrypt(username),
                password: AESEncrypt(password),
                userCaptcha: AESEncrypt(userCaptcha),
                checkKey: AESEncrypt(this.checkKey),
                code: AESEncrypt(code),
            }).then(res => {
                console.log('res', res)
               this.$store.dispatch('GetInfo').then(res2 => {
                 console.log('this.$store.state.user',this.$store.state.user)
                 if (this.$store.state.user.roleName === '区县市网信办' || this.$store.state.user.roleName === '市级部门') {
                   this.$router.replace('/instructions/index')
                 } else {
                   this.$router.replace('/')
                 }
               })
             }).catch((err) => {
                console.log('err', err)
                if(err.code == 999999) {
                    this.refreshImgFun()
                } else if (err.code === 0) {
                    console.log('密码需要修改', username)
                    this.$refs.pwd.modalShow.show1 = true
                    if(username === 'admin') this.$refs.pwd.shows = true
                    this.loginForm.password = ''
                    this.loginForm.code = ''
                    this.loginForm.userCaptcha = ''
                    this.refreshImgFun()
                    this.isLogin = false
                }
               this.isLogin = false
             })

        },
        refreshImgFun() {
            this.checkKey = `${new Date().getTime()}`;
            this.getCheckNumber = getCheckNumber() + '?checkKey=' + encodeURIComponent(AESEncrypt(this.checkKey)) + '&v=' + new Date().getTime();

            // getCheckNumber2({
            //   checkKey: this.checkKey
            // }).then(res => {

            // });
        },
    }
  }
  </script>

  <style lang="less" scoped>
  .login {
    width: 100vw;
    height: 100vh;
    background-image: url("~@/assets/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;

    .ant-input {
        background: transparent;
        border: none;
    }

    .ant-input:focus {
        border: none;
        box-shadow: none;
    }

    .login-btn {
        width: 320px;
        height: 33px;
        background: #2D6FE9;
        border-radius: 17px;
        margin-top: 17px;
        text-align: center;
        line-height: 33px;
        color: #ffffff;
        cursor: pointer;
    }
    .title-plant {
        font-size: 18px;
        color: #666;
        margin-bottom: 36px;
    }
    .form-box {
        width: 525px;
        height: 447px;
        background: #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top: 97px;
        right: 221px;
        padding-top: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .form-item {
            width: 320px;
            height: 33px;
            background: rgba(45, 111, 233, .1);
            border-radius: 17px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            margin-bottom: 25px;
            position: relative;
        }

        .title {
            width: 76px;
            height: 36px;
            font-size: 38px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #2D6FE9;
            text-align: center;
            margin-bottom: 56px;
        }
    }
  }
  </style>
